<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-cloak指令</title>
  <!-- 引入Vue -->
  <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
</head>

<style>
  [v-cloak] {
    display: none;
  }
</style>

<body>
  <!-- 
    v-cloak指令（没有值）：
      1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除掉v-cloak属性。  骨屏架构
      2.使用css配合v-cloak可以解决网速慢时，页面展示出{{xxx}}的问题。
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2 v-cloak>{{name}}</h2>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
</body>

<script type="text/javascript">
  console.log(1);
  Vue.config.productionTip = false;   // 阻止vue 在启动时生成生产提示

  new Vue({
    el: "#root",
    data: {
      name: "尚硅谷"
    }
  })
</script>

</html>